<template>
    <div class="itl">
        <van-nav-bar
                title="积分商城"
                left-arrow
                @click-left="onClickLeft"
        />
        <!--分类栏-->
        <van-tabs  v-model="active">
            <van-tab title="全部">
                <!--积分商品数据-->
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <van-cell v-for="item in list" :key="item.exchange_id" style="border-top: 1px solid #ebedf0;padding: 10px;">
                        <div style="display: flex;">
                            <div style="    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;"><img :src="item.goods_img" alt="" style="width: 100px;"></div>
                            <div style="width: 69%;">
                                <p style="    overflow: hidden;
    word-break: break-all;font-size: 14px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;margin-bottom: 15px!important;line-clamp: 2;">{{item.goods_name}}</p>
                                <p style="display: flex;justify-content: space-between;color: #fa3534;"><span>{{item.exchange_point}}积分 + ￥{{item.exchange_money}}</span><span style="color: #fff;
    padding: 2px 10px;
    border-radius: 4px;font-size: 14px;
    background-color: #fa3534;" @click="goGoods">兑换</span></p>
                                <p style="margin-top: 10px!important;color: #666;
    font-size: 12px;">原价: ￥{{item.goods_price}}</p>
                            </div>
                        </div>
                    </van-cell>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import jsp from '../../Api/Api'

    export default {
        name: "Integralshop",
        data() {
            return {
                active: 1,
                loading: false,
                finished: false,
                list: [],
                num: 1,
            }
        },
        created() {
            //购物的数据
            jsp.carts().then(data => {
                console.log(data.data)
            }).catch(error => console.log(error))

        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onLoad() {
                //积分的数据
                jsp.integralShop(this.num).then(data => {
                    console.log(data.data)
                    this.list.push(...data.data.data)
                    this.num++
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= data.data.data_total) {
                        this.finished = true;
                    }
                }).catch(error => console.log(error))
            },
            goGoods(){
                this.$router.push('/goods')
            },
        },
    }
</script>

<style scoped>
    >>> .van-nav-bar .van-icon {
        color: #000 !important;
    }
    .van-hairline--bottom::after{
        border: none !important;
    }
    >>>.van-tabs__line{
        margin-bottom: 3px !important;
    }
</style>